<template>
  <!-- 社区借用子模板 -->
  <div>
    <li class="borrow_Ul_li" @click="goDetail(val.id)" v-for="(val, index) in borrow" :key="index">
      <!-- 物品 -->
      <div class="borrow_Ul_li_borrow">
        <van-swipe lazy-render v-if="val.item">
          <van-swipe-item
            style="height:200px;"
            v-for="(items,indexs)  in  val.item.imgList "
            :key="indexs"
            @click.stop="bigImg(index,indexs)"
            fit="contain"
          >
            <van-image
              :src="items"
              class="swip_img lostFound_Ul_li_lostFound_img"
              style="height:200px; padding:5px 0;"
            >
              <template v-slot:loading>
                <van-loading size="20px" vertical>加载中...</van-loading>
              </template>
            </van-image>
            <!-- <img :src="items" class="swip_img" style="height:200px;" /> -->
          </van-swipe-item>
        </van-swipe>
        <div class="borrow_Ul_li_borrow_div" style="margin:  5px 0  5px 0;">物品名称:{{ val.title }}</div>
      </div>

      <!-- 用户 -->
      <div class="borrow_Ul_li_user">
        <img :src="val.user.avatar" alt />
        <span>姓名:{{ val.user.username }}</span>
      </div>
      <div style="width: 100%; padding: 0 3px">
        <p class="overflowSingle" style="font-size: 12px; width: 100%">邮箱:{{ val.user.email }}</p>
        <p class="overflowSingle" style="font-size: 14px">电话:{{ val.user.phone }}</p>
      </div>
      <!-- 丢失时间 -->
      <!-- <div class="borrow_Ul_li_date">借用时间：{{ formatDateTime(val.item.createTime) }}</div> -->
    </li>

    <el-pagination
      class="pagination"
      background
      style="margin-top: 1rem"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import formatDateTime from '../utils/data'
import { ImagePreview } from 'vant'
export default {
  // 接受父组件传递的数据
  props: {
    borrow: {
      type: Array, // 渲染的列表值
    },
    currentPage: {
      type: Number, // 当前现实页码数
    },
    total: {
      type: Number, // 总数
    },
    pageSize: {
      type: Number, // 每页显示数据
    },
    active: {
      type: Number,
    },
  },

  data() {
    return {
      currentPages: 0,
    }
  },
  created() {
    console.log(this.borrow)
    console.log(this.active)
  },

  methods: {
    //日期格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },

    // 分页处理
    handleCurrentChange(val) {
      this.currentPages = val
      this.$emit('getBorrow', this.currentPages)
    },
    // 跳转详情页面
    goDetail(itemId) {
      this.$router.push('/borrowDetail/' + itemId + '/' + this.active)
    },

    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.borrow[index].item.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.borrow_Ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}
.borrow_Ul_li {
  width: 50%;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
  margin-bottom: 30px;
}
.borrow_Ul_li_date {
  font-size: 14px;
  color: #a1a1a1;
}

/* 东西的照片 */
.borrow_Ul_li_borrow {
  width: 100%;
}
.borrow_Ul_li_borrow_img {
  display: block;
  width: 100%;
  height: 160px;
}
.borrow_Ul_li_borrow_div {
  font-size: 16px;
}
/* 用户 */
.borrow_Ul_li_user {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.borrow_Ul_li_user > img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.borrow_Ul_li_user > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.pagination {
  clear: both;
}
</style>
